<template>
  <div class="container">
    <NavBar />
    <div class="profile-header">
      <div class="avatar-container">
        <div class="avatar">
          <img src="../assets/avatar.jpg" alt="头像">
        </div>
      </div>
    </div>
    <div class="profile-form">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="手机号码">
          <el-input v-model="form.phoneNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="form.idCardNumber"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import NavBar from '../components/NavBar.vue';
import axios from 'axios'; 

export default {
  name: 'InfoPanel',
  data() {
    return {
      form: {
        userName: '', 
        phoneNumber: '',
        gender:'',
        password:'',
        idCardNumber:'',
        address:''
      }
    };
  },
  components: {
    NavBar
  },
  
  mounted() {
    this.fetchUserInfo();
  },
  methods: {
    onSubmit() {
      const token = localStorage.getItem('userToken');
      axios.post('http://localhost:8081/users/update', this.form, {
        headers: {
          'Authorization': 'Bearer ' + token,
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        alert("成功修改");
        console.log('User info updated successfully', response);
        // 这里可以添加一些成功处理逻辑，比如提示用户信息已更新
      })
      .catch(error => {
        console.error("Error updating user info:", error);
        // 这里可以添加一些错误处理逻辑
      });
    },
    fetchUserInfo() {
      const token = localStorage.getItem('userToken');
      if (token) {
        axios.get('http://localhost:8081/users/info', {
          headers: {
            'Authorization': 'Bearer ' + token
          }
        })
        .then(response => {
          this.form = response.data; // 假设后端返回的数据结构与form对象匹配
        })
        .catch(error => {
          console.error("Error fetching user info:", error);
          // 这里可以添加一些错误处理逻辑
        });
      }
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  margin: 40 auto;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 40 auto;
  margin-bottom: 20px;
}

.avatar-container {
  width: 150px; /* 增加头像容器的宽度 */
  height: 150px; /* 增加头像容器的高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #ebebeb; /* 添加边框 */
  border-radius: 50%;
  padding: 10px;
  background-color: #f5f5f5; /* 添加背景色 */
  margin-bottom: 20px; /* 增加这个外边距，使头像下移 */
}

.avatar {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px; /* 增加这个外边距，使头像在容器内部下移 */
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片覆盖整个头像区域 */
}

.avatar-label {
  font-size: 16px;
  color: #333;
  margin-top: 10px;
}

.profile-form {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.el-form-item__label {
  text-align: right;
}
</style>